//引入样式
require('../css/commonCss/normalize.css')
require('../css/commonCss/reset.css')
require('../css/commonCss/property.css')
require('../css/commonCss/basic.less')
require('../fonts/iconfont.css')

require('../css/classTrainTwo.less')
//引入axios
const axios = require('axios')
//weui—插件库
require('weui')
const weui = require('weui.js')

// 文档加载事件
document.addEventListener('DOMContentLoaded', function () {
    // 显示蒙层
    const paly = document.querySelector('#paly') //播放
    const prevBtn = document.querySelector('#prevBtn') //上一章节按钮
    const nextBtn = document.querySelector('#nextBtn') //下一章节按钮
    const mask = document.querySelector('#mask') //蒙层
    const continueLeft = document.querySelector('#continueLeft') //继续播放
    const over = document.querySelector('#over') //结束播放
    let title = document.querySelector('.title') //对应课程名称
    const text = document.querySelector('.text') //蒙层对应课程名称
    const startNum = document.querySelector('#startNum') //开始课程章节
    const endNum = document.querySelector('#endNum') //结束课程章节
    const imgUrl = document.querySelector('#imgUrl') //渲染图片
    const progress = document.querySelector('.progress') //播放进程
    const videoUrl = document.querySelector('#videoUrl')//视频播放
    // console.log(mask);
    //播放
    paly.addEventListener('click', function () {
        videoUrl.pause();//视频停止播放
        mask.style.display = 'block' //显示模态框
        clearInterval(timeId) //清除计时器
    })
    //继续训练
    continueLeft.addEventListener('click', function () {
        videoUrl.play();
        mask.style.display = 'none'
        grtTrainTime(); //重新计时
    })
    // 结束训练
    over.addEventListener('click', function () {
        // location.href = './classTrain.html'
        // console.log(time);
        let params = {
            id:sessionStorage.cid,
            userId:localStorage.userId,
            takeTime:time,
            calorie:time*0.12
        }
        // console.log(params);
        axios.post("http://139.9.177.51:8099/sports/saveTrain",params)
        .then(function(res){
            if(res.data.status === 0){//成功
                weui.toast(`消耗了${params.calorie.toFixed(1)}卡路里`,{
                    callback:function(){
                        location.href = './classTrain.html'
                    }
                })
            }else{//失败
                weui.alert('继续加油哟！')
            }
        })
    })
    // 从会话存储中获取数据
    let fragments =  JSON.parse(sessionStorage.fragments)
    // console.log(fragments);
    // 获取总章节
    let maxNum = fragments.length;
    // console.log(maxNum);
    endNum.textContent = maxNum;
    // 定义一个当前索引值
    let index = 0;
    // 定义一个定时器ID
    let timeId = null;
    // 定义训练时长
    let time = 0;
    // 渲染数据
    renderData()
    function renderData(){
        // 渲染视频
        videoUrl.src = "http://139.9.177.51:8099"+fragments[index].videoUrl;
        // videoUrl.autoplay = true;
        videoUrl.play();
        // 渲染标题
        // title[0].textContent = fragments[index].title;
        // title[1].textContent = fragments[index].title;
        title.textContent = fragments[index].title;
        text.textContent = fragments[index].title;

        // 渲染图片
        imgUrl.src ="http://139.9.177.51:8099"+fragments[index].imgUrl

        // 渲染当前章节数
        startNum.textContent = index+1;
    }
    //上一章节
    prevBtn.addEventListener('click',function(){
        // alert(11)
        // 索引值减一
        index --;
        if(index == -1){
            index = maxNum -1;
        }
        renderData()
    })
    //下一章节
    nextBtn.addEventListener('click',function(){
        // alert(11)
        // 索引值减一
        index ++;
        if(index == fragments.length){
            index = 0;
        }
        renderData()
    })
    /* 
        进度条制作
        当前宽度= 当前时长（currentTime）*总宽度（100%）/总时长（duration）
     */
     //播放时间更新时触发
     videoUrl.addEventListener('timeupdate', function () {
        //console.log(video.currentTime);
        let width = videoUrl.currentTime * 100/ videoUrl.duration
        // console.log(width);
        progress.style.width = width + '%';
      })
    //ended事件
    videoUrl.addEventListener('ended',function(){
        weui.toast('即将开启下一章节练习')
        setTimeout(function(){
            nextBtn.click();
        },2000)
    })
    // 记录时间
    grtTrainTime();
    function grtTrainTime(){
        timeId = setInterval(function(){
            time++;
        },1000)
    }
})